// pages/menu/menu.js
Page({
  data: {
    // banner的轮播图数组
    swiperArr: [
      "/images/banner/menubanner1.jpg",
      "/images/banner/menubanner2.jpg",
      "/images/banner/menubanner3.jpg",
    ],
    menuArr: [
      {
        "id": 0,
        "title": "人气Top",
        "subArr": [
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "拿铁" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "桃桃芝士红宝石" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "咖啡风味安慕希" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "陨石拿铁" }
        ]
      },
      {
        "id": 1,
        "title": "大师咖啡",
        "subArr": [
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "冲绳黑糖拿铁" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "陨石拿铁" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "拿铁" }
        ]
      },
      {
        "id": 2,
        "title": "小鹿茶精选",
        "subArr": [
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "标准美式" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "加浓美式" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "焦糖标准美式" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "焦糖加浓拿铁" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "银河气泡美式" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "银河气泡美式" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "银河气泡美式" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "银河气泡美式" }
        ]
      },
      {
        "id": 3,
        "title": "瑞纳冰",
        "subArr": [
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "乐岛桃桃冰" }
        ]
      },
      {
        "id": 4,
        "title": "鲜榨果蔬汁",
        "subArr": [
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "NFC鲜榨橙汁" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "NFC鲜榨西柚汁" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "猕猴桃复合果汁" }
        ]
      },
      {
        "id": 5,
        "title": "经典饮品",
        "subArr": [
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "巧克力" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "纯牛奶" }
        ]
      },
      {
        "id": 6,
        "title": "健康轻食",
        "subArr": [
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "京味烤鸭鲜蔬卷" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "夏威夷菠萝火山卷" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "火腿芝士羊角" },
          { "imgSrc": "/images/menu/1-1.jpg", "imgDesc": "鸡肉卷" }
        ]
      }
    ],
    // 左侧的id
    leftId: "left0",
    // 左侧当前项
    leftActiveNum: 0,
    // 右侧的id
    rightId: "right0",
    // 右侧高度的数组
    heightArr: []
  },
  // 获取每个区块的高度（操作dom）----mounted
  // vue中的mounted也没有说100%保证所有组件渲染完
  onReady() {
    let _this = this;
    setTimeout(() => {
      let initArr = [0];  // 初始的数组
      let initNum = 0;    // 初始的数值
      const query = wx.createSelectorQuery()
      query.selectAll('.rightblock').boundingClientRect()
      query.selectViewport().scrollOffset()
      query.exec(function(res){
        res[0].map(val => {
          initNum += val.height;   // 实现高度的累加
          initArr.push(initNum);   // 将累加出来的高度push到数组中
        })
        // console.log(initArr);  // 拿到每一个的height，并且存起来
        _this.setData({
          heightArr: initArr
        })
      })
    },300)
  },
  // 左侧点击事件
  leftClickFn(e) {
    console.log(this.data.heightArr);
    // console.log(e.target.dataset.myid);
    this.setData({
      leftActiveNum: e.target.dataset.myid,
      leftId: "left" + e.target.dataset.myid,
      rightId: "right" + e.target.dataset.myid
    })
  },
  // 右侧滚动事件
  rightScrollFn(e) {
    console.log(e.detail.scrollTop);
    let st = e.detail.scrollTop;
    let myarr = this.data.heightArr;
    for(let i=0;i<myarr.length;i++) {
      if(st >= myarr[i] && st < myarr[i+1]-5) {
        this.setData({
          leftId: "left" + i,
          leftActiveNum: i
        });
        return;
      }
    }
  }
  
})